<template>
	<view class="mainpadding">
		<view class="flexbetween">
			<view class="flexleft">
				<view class="margin_right lableradius waisong">外送</view>
				<view class="hong_text bold titletext">#66</view>
			</view>
			<view class="hong_text main_size" v-show="orderInfo.status==0">待接單</view>
			<view class="huang_text main_size" v-show="orderInfo.status==1">已接單</view>
			<view class="hong_text main_size" v-show="orderInfo.status==2">已拒絕</view>
		</view>
		<view class="mainpadding_top ffffff radius">
			<view class="hei_text bold titletext">基礎信息</view>
			<view class="hui_text main_size margin_top">商店名稱：<text class="hei_text">{{orderInfo.store_name}}</text></view>
			<view class="hui_text main_size  margin_top flexleft"> <u-icon name="account-fill" color="#472d6e"
					size="18"></u-icon>
				<text class="margin_left1">顧客：</text> <text class="hei_text">{{orderInfo.eater_name}}</text>
			</view>
			<view class="flexbetween margin_top">
				<view class="hui_text main_size   flexleft"> <u-icon name="phone-fill" color="#ff0000"
						size="18"></u-icon>
					<text class="margin_left1">電話：</text><text class="hei_text">{{orderInfo.eater_phone}}</text>
				</view>
				<image class="shopPhone margin_left2" src="@/static/image/system/phoneShop.png" mode=""
					@click.stop="phone(orderInfo.eater_phone)"></image>
			</view>
			<view class="flexbetween margin_top">
				<view class="hei_text main_size bold">創建時間</view>
				<view class="hui_text main_size bold">{{orderInfo.createtime_text}}</view>
			</view>
			<view class="hui_text main_size  margin_top" v-if="orderInfo.special_instructions">顧客備注：<text
					class="hei_text">{{orderInfo.special_instructions}}</text></view>
		</view>
		<view class="mainpadding_top ffffff radius">
			<view class="hei_text bold titletext">品項</view>
			<view class="xiaohei main_size margin_top" v-for="(item,index) in orderInfo.uberordergoods"
				:key="item.id">
				<view>
					<text>{{index+1}}. {{item.title}}</text>
					<text class="xiaohuang main_size">*{{item.quantity}}</text>
				</view>
				<view class="xiaohei margin_top1" v-show="item.special_instructions">備注：{{item.special_instructions}}
				</view>
			</view>
		</view>
		<view class="mainpadding posibottom" style="padding-bottom: 0;">
			<view class="flexright margin_top2">
				<!-- // status 状态:0=待处理,1=已接受,2=已解决 -->
				<view class="listbtn margin-right" v-if="orderInfo.status==0" style="background-color: #17a34a;"
					@click="jieshou(orderInfo.uber_id)">接受</view>
				<view class="listbtn" v-if="orderInfo.status==0" style="background-color: #ee4444;" @click=";show=true">拒絕
				</view>
			</view>
		</view>
		
		<!-- 接單 -->
		<u-modal :show="show" showCancelButton confirmText="確認" cancelText="取消" confirmColor="#f5a623" title="選擇拒絕原因"
			@cancel="show=false" @confirm="confirmjj">
			<view class="slot-content">
				<view class="mainpadding">
					<picker-view indicator-style="height: 50px;" :value="currentvalue" @change="bindChange"
						class="picker-view">
						<picker-view-column>
							<view class="item" v-for="(item,index) in fpgd_arr" :key="index">{{item.name}}</view>
						</picker-view-column>
					</picker-view>
				</view>
			</view>
		</u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				orderInfo: {},
				uber_id: "",
				fpgd_name: "",
				fpgd_arr: [{
						name: "廚房已關閉",
						key: "KITCHEN_CLOSED"
					},
					{
						name: "客戶打電話取消",
						key: "CUSTOMER_CALLED_TO_CANCEL"
					},
					{
						name: "餐廳太忙了",
						key: "RESTAURANT_TOO_BUSY"
					},
					{
						name: "訂單驗證錯誤",
						key: "ORDER_VALIDATION"
					},
					{
						name: "商店已關閉",
						key: "STORE_CLOSED"
					},
					{
						name: "POS 尚未準備好",
						key: "POS_NOT_READY"
					},
					{
						name: "POS 處於離線狀態",
						key: "POS_OFFLINE"
					},
					{
						name: "門市訂單容量已滿",
						key: "CAPACITY"
					},
					{
						name: "地址問題",
						key: "ADDRESS"
					},
					{
						name: "其他",
						key: "OTHER"
					},
				],
				show: false,
				currentvalue: [0],
			}
		},
		onLoad(options) {
			this.uber_id = options.id
			this.getuberOrderInfo()
		},
		methods: {
			confirmjj() { //拒絕
				this.show = false
				uni.showLoading({
					mask: true,
					title: "請稍後"
				})
				this.http.request("/api/Ubercl/clUberOrder", "POST", {
					uber_id: this.uber_id,
					status: 2,
					deny_reason: this.fpgd_arr[this.currentvalue[0]].key,
					deny_des: this.fpgd_arr[this.currentvalue[0]].name
				}).then(res => {
					uni.hideLoading()
					this.http.toast(res.msg)
					this.getuberOrderInfo()
				})
			},
			
			jieshou(uber_id) {
				this.http.modal('提示', "是否確認接單", true, (resp) => {
					if(resp){
						uni.showLoading({
							mask: true,
							title: "請稍後"
						})
						this.http.request("/api/Ubercl/clUberOrder", "POST", {
							uber_id,
							status: 1,
						}).then(res => {
							uni.hideLoading()
							this.http.toast(res.msg)
							this.getuberOrderInfo()
						})
					}
				})
			},
			bindChange(e) {
				console.log(e);
				const val = e.detail.value
				this.currentvalue = e.detail.value
			},
			getuberOrderInfo(uber_id) {
				this.http.request("/api/Ubercl/uberOrderInfo", "POST", {
					uber_id: this.uber_id
				}).then(res => {
					this.orderInfo = res.data
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.listbtn {
		padding: 15rpx 40rpx;
		font-size: 28rpx;
		border-radius: 10rpx;
		color: #fff;
	}
</style>